<template>
  <div class="record-warpper">
    <el-dialog :title="dialogTitle" :visible.sync="isShow" width="65%">
      <el-table :data="tableData" :header-cell-style="{ background: '#F7F8FA' }" border style="width: 1001px; max-width: 100%;">
        <el-table-column label="商品信息" width="400">
          <template slot-scope="scope">
            <p>{{ scope.row.shopTitle }}</p>
            <p>ID：<el-link type="primary">{{ scope.row.shopId }}</el-link></p>
            <p>编码/货号：{{ scope.row.shopCode }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="150" />
        <el-table-column prop="sku" label="SKU" width="100" />
        <el-table-column prop="stock" label="库存" width="150" />
        <el-table-column prop="state" label="状态" width="100" />
        <el-table-column prop="isPreSale" label="是否预售" width="100" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getFissionLogs } from '@/api/shop-change'
export default {
  props: {
    shopChangeRecord: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dialogTitle: '',
      tableData: [],
      isShow: false
    }
  },
  watch: {
    shopChangeRecord: {
      handler(newVal) {
        console.log(newVal)
        if (newVal.isShow) {
          this.isShow = newVal.isShow
          this.dialogTitle = `商品ID：【${newVal.shopId}】 裂变记录`
          const params = {
            PageIndex: 1,
            PageSize: 20,
            ShopGoodsId: '123456'
          }
          getFissionLogs(params).then(res => {
            console.log(res)
          })
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.record-warpper {
  padding: 0 20px;
}
</style>
